<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    width="650px">
    <div class="withdraw-view-content">
      <div class="block-card">
        <div class="block-card-item">
          <span>用户ID:</span> {{form.user_id}}
        </div>
        <div class="block-card-item">
        </div>
      </div>
      <div class="block-card">
        <div class="block-card-item">
          <span>昵称:</span> {{form.name}}
        </div>
        <div class="block-card-item">
          <span>申请时间:</span> {{form.time_create}}
        </div>
      </div>
      <div class="block-card">
        <div class="block-card-item">
          <span>提现金额:</span> {{form.money | moneyFilter}}
        </div>
        <div class="block-card-item">
          <span>手续费:</span> {{form.tax | moneyFilter}}
        </div>
      </div>
      <div class="block-card">
        <div class="block-card-item">
          <span>打款金额:</span> {{form.real_money | moneyFilter}}
        </div>
        <div class="block-card-item">
          <span>审核时间:</span> {{form.time_finish}}
        </div>
      </div>
    </div>
    <div class="refund-reason" v-if="isRefuse">
      <div class="title">拒绝理由</div>
      <div class="reason">
        {{form.fail_reason}}
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'banner-edit',
  data () {
    return {
      dialogVisible: false,
      form: {
        name: '',
        money: '',
        real_money: '',
        time_create: '',
        time_finish: '',
        trade_no: '',
        tax: '',
        type: 'alipay',
        user_id: '',
        status: '',
        fail_reason: '',
        account: {
          account: '',
          image: '',
          name: '',
          time_update: '',
          type: '',
          user_id: ''
        }
      }
    }
  },
  computed: {
    title () {
      return this.isPass ? '详情（已通过）' : '详情（已拒绝）'
    },
    isPass () {
      return this.form.status === 1
    },
    isRefuse () {
      return this.form.status === 2
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    open (row) {
      Object.assign(this.form, row)
      this.dialogVisible = true
      return new Promise((resolve) => {
        this._resolve = resolve
      })
    },
    cancel () {
      this.close()
    },
    close () {
      this._resolve({ refresh: true })
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.withdraw-view-content {
  display: flex;
  flex-direction: column;
  .block-card {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px;
    line-height: 25px;
    .block-card-item {
      display: flex;
      width: 50%;
      span {
        padding-right: 8px;
        font-weight: bold;
      }
    }
  }
}
.refund-reason {
  padding: 10px;
  .title {
    font-weight: bold;
    margin-bottom: 8px;
  }
  .reason {
    background: #f6f6f6;
    line-height: 25px;
    min-height: 65px;
  }
}
</style>
